<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<HEAD>
     <TITLE>Optgroup</TITLE>
     <link rel="stylesheet" type="text/css" href="../../../ss/2.css" id="thecss">
     <script type="text/javascript" src="../../../scripts/csschange.js"></script>
</HEAD>

<BODY onload="readSS()">

<br>
<center>
<table border=3 cellpadding=5 cellspacing=0>
<tr>
     <td><h1 class="pagetitle">Option Group</h1>
         <b><a href="../../../misc/suppkey.htm">Support Key:</a></b> 
         [<span class="ns">2</span>|<span class="ns">3</span>|<span class="ns">3.2</span>|<b><i class="fs">4</i></b>] 
         [<b class="s">X1</b>|<b class="s">X1.1</b>]
         [<b class="s">IE6</b>|<span class="ns">M</span>|<b><i class="fs">N6B1</i></b>|<b class="s">O7</b>]</td>
     <td><a href="#what">What is it?</a><br>
         <a href="#attrib">Attributes</a><br>
         <a href="#example">Tag Example</a>
     </td>
     <td><a href="#model">Parent/Content Model</a><br>
         <a href="#tips">Tips &amp; Tricks</a><br>
         <a href="#peculiar">Browser Peculiarities</a></td>
</tr>
<tr><td align=center colspan=3>
<font size=2>= <span class="sitetitle">Index DOT Html</span> by <a href="../../../misc/email.htm">Brian Wilson</a> =</font>
</td></tr>
</table>

<font size=2>
     <a href="../../index.html">Main Index</a> |
     <a href="../../tree/htmltree.htm">Element Tree</a> |
     <a href="../../tagindex/a.htm">Element Index</a> |
     <a href="../../supportkey/a.htm">HTML Support History</a></font>
</center>
<hr align="center" width="25%">

<br><br>
<table border=1 cellspacing=0 cellpadding=5>
<tr><td>
<table border=0 cellspacing=0>
<tr>
   <th colspan=3 valign=bottom class="field"><big><u><b
       class="colheaders">&#160;&#160;&#160;Quick Statistics&#160;&#160;&#160;</b></u></big><br></th>
</tr>
<tr><th align=left><b class="l3heading"><a href="../stats.htm#et">End Tag:</a></b><br></th>
    <td rowspan=7>&nbsp;&nbsp;</td>
    <td><span class="magicword">Required</span></td></tr>
<tr><th align=left><b class="l3heading"><a href="../stats.htm#std">Standards Details:</a></b><br></th>
    <td>In all HTML 4.x/XHTML DTDs</td></tr>
<tr><th align=left><b class="l3heading"><a href="../stats.htm#xhtm">XHTML Modules:</a></b><br></th>
    <td><b class=alert>Forms</b></td></tr>
<tr><th align=left valign=top><b class="l3heading"><a href="../stats.htm#disp">CSS 'display' Type:</a></b><br></th>
    <td>NA</td></tr>
<tr><th align=left valign=top><b class="l3heading"><a href="../stats.htm#css">CSS Mapping:</a></b><br></th>
    <td>NA</td></tr>
<tr><th align=left><b class="l3heading"><a href="../stats.htm#rnd">Default Rendering:</a></b><br></th>
    <td>NA</td></tr>
<tr><th align=left><b class="l3heading"><a href="../stats.htm#w3docs">Official Docs:</a></b><br></th>
    <td><a href="http://www.w3.org/TR/html401/interact/forms.html#h-17.6">HTML 4.x</a>, 
        <a href="http://www.w3.org/TR/xhtml-modularization/abstract_modules.html#s_extformsmodule">XHTML 1.1</a></td></tr>
</table>
</td></tr>
</table>

<br>
<a name="what"></a>
<dl>
<dt><big><b class="mainheading">What is it?</b></big>
    <dd>The OPTGROUP element allows authors to group selection list choices
        into a hierarchy. This is particularly helpful to non-visual user
        agents when large numbers of options are available to choose from.
        Possible rendering of this element could be a collapsible hierarchy
        list of OPTION element content or some presentation conveying the
        hierarchy relationship of the OPTION contents. Browsers not
        supporting this element will &quot;see&quot; only a traditional flat
        list of OPTION elements. The LABEL attribute for this element is used to 
        provide shorter labels for the nodes of the hierarchical menus.
</dl>


<a name="attrib"></a>
<dl>
<dt><br><big><b class="mainheading">Common Attributes</b></big>
<dt><b class="subheading">%<a href="../attributes/core.htm">Core</a>%</b>
    <dd>[<span class="ns">2</span>|<span class="ns">3</span>|<span class="ns">3.2</span>|<b><i class="fs">4</i></b>] 
        [<b class="s">X1</b>|<b class="s">X1.1</b>]
        [<b class="s">IE6</b>|<span class="ns">M</span>|<b><i class="fs">N6B1</i></b>|<b class="s">O7</b>]

<dt><b class="subheading">%<a href="../attributes/accessibility.htm">Accessibility</a>%</b>
    <dd>[<span class="ns">2</span>|<span class="ns">3</span>|<span class="ns">3.2</span>|<b><i class="fs">4</i></b>] 
        [<b class="s">X1</b>|<b class="s">X1.1</b>]
        [<span class="ns">IE</span>|<span class="ns">M</span>|<b><i class="fs">N6</i></b>|<b class="s">O7</b>]

<dt><b class="subheading">%<a href="../attributes/events.htm">Events</a>%</b>
    <dd>[<span class="ns">2</span>|<span class="ns">3</span>|<span class="ns">3.2</span>|<b><i class="fs">4</i></b>] 
        [<b class="s">X1</b>|<b class="s">X1.1</b>]
        [<span class="ns">IE</span>|<span class="ns">M</span>|<b><i class="fs">N6B1</i></b>|<b class="s">O7</b>]

<dt><b class="subheading">%<a href="../attributes/language.htm">Language</a>%</b>
    <dd>[<span class="ns">2</span>|<span class="ns">3</span>|<span class="ns">3.2</span>|<b><i class="fs">4</i></b>] 
        [<b class="s">X1</b>|<b class="s">X1.1</b>]
        [<span class="ns">IE</span>|<span class="ns">M</span>|<b><i class="fs">N6</i></b>|<span class="ns">O</span>]

<dt><br><big><b class="mainheading">Specific Attributes</b></big>
<dt><b class="subheading">Disabled</b>
<dt>[<span class="ns">2</span>|<span class="ns">3</span>|<span class="ns">3.2</span>|<b><i class="fs">4</i></b>] 
    [<b class="s">X1</b>|<b class="s">X1.1</b>]
    [<span class="ns">IE</span>|<span class="ns">M</span>|<b><i class="fs">N6B1</i></b>|<b class="s">O7</b>]
    <dd><b class="l3heading"><a href="../stats.htm#std">Standards Details:</a></b> 
        In all HTML 4.x/XHTML DTDs
    <dd><b class="l3heading">Required?</b> No
    <dd><b class="l3heading">Description:</b><br>
        This is a stand-alone attribute which indicates the element is initially non-functional. 
        Disabled form elements should not be submitted to the form processing script.
    <dd><b class="l3heading">Values:</b> NA (HTML); <b class="alert">disabled</b> (XHTML)

<dt><b class="subheading">Label</b>
<dt>[<span class="ns">2</span>|<span class="ns">3</span>|<span class="ns">3.2</span>|<b><i class="fs">4</i></b>]
    [<b class="s">X1</b>|<b class="s">X1.1</b>]
    [<b class="s">IE6</b>|<span class="ns">M</span>|<b><i class="fs">N6B1</i></b>|<b class="s">O7</b>]
    <dd><b class="l3heading"><a href="../stats.htm#std">Standards Details:</a></b> 
        In all HTML 4.x/XHTML DTDs
    <dd><b class="l3heading">Required?</b> Yes
    <dd><b class="l3heading">Description:</b><br>
        This specifies a shorter alternate label for use in identifying the sub-group of options.
    <dd><b class="l3heading">Values:</b> <a href="../../../misc/glossary.htm#cdata">CDATA</a>
</dl>


<a name="example"></a>
<dl>
<dt><big><b class="mainheading">Example</b></big>
    <dd><div class="example">John and Judy's family tree:<br>
        &lt;<b class="tagname">select</b>
        <span class="tagattrib">name</span>=&quot;Familytree&quot;&gt;<br>
        &lt;<b class="tagname">option</b>
        <span class="tagattrib">label</span>=&quot;Bill&quot;
        <span class="tagattrib">value</span>=&quot;bill&quot;&gt;Bill Smith
        &lt;/<b class="tagname">option</b>&gt;<br>
        &lt;<b class="tagname">option</b>
        <span class="tagattrib">label</span>=&quot;Mary&quot;
        <span class="tagattrib">value</span>=&quot;mary&quot;&gt;Mary Smith
        &lt;/<b class="tagname">option</b>&gt;<br>
        &lt;<b class="tagname">optgroup</b>
        <span class="tagattrib">label</span>=&quot;Joe&quot;&gt;<br>
        &#160;&#160;&#160;&#160;&lt;<b class="tagname">option</b>
        <span class="tagattrib">value</span>=&quot;michael&quot;&gt;Michael Smith
        &lt;/<b class="tagname">option</b>&gt;<br>
        &#160;&#160;&#160;&#160;&lt;<b class="tagname">option</b>
        <span class="tagattrib">value</span>=&quot;susan&quot;&gt;Susan Smith
        &lt;/<b class="tagname">option</b>&gt;<br>
        &#160;&#160;&#160;&#160;&lt;<b class="tagname">option</b>
        <span class="tagattrib">value</span>=&quot;howard&quot;&gt;Howard Smith
        &lt;/<b class="tagname">option</b>&gt;<br>
        &lt;/<b class="tagname">optgroup</b>&gt;<br>
        &lt;/<b class="tagname">select</b>&gt;
</dl>


<a name="model"></a>
<dl>
<dt><big><b class="mainheading">Parent Model</b></big>
    <dd>&lt;<a href="../s/select.htm">select</a>&gt; | &lt;optgroup&gt;
<dt><big><b class="mainheading">Content Model</b></big>
    <dd>&lt;<a href="../o/option.htm">option</a>&gt; | &lt;optgroup&gt;
</dl>


<a name="tips"></a>
<big><b class="mainheading">Tips &amp; Tricks</b></big>
<ul>
    <li>Nothing to report.
</ul>

<a name="peculiar"></a>
<big><b class="mainheading">Browser Peculiarities</b></big>
<ul>
    <li><a href="../../../testing/html/tags/o/optgroup-bp1.htm" class="testcase">[Test]</a>
        IE6: IE seems to need OPTION elements to be explicitly closed for the OPTGROUP
        element to work correctly. In HTML though, end tags for OPTION are,
        well..."optional", so this just seems to be a bug (Note: in XHTML the closing 
        tags are NOT optional.)
</ul>


<br>
<a href="../../../misc/copyright.htm">Boring Copyright Stuff...</a>

</BODY>
</HTML>

